<template>
<div class="page-wrapper">
  <Breadcrumb v-bind="breads" />
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <form class="form-inline" role="form" @submit.prevent="searchCharges(1)">
              <div class="form-group">
                <label class="control-label">交易时间：</label>
                <div class="input-group">
                  <input type="text" name="orderTimeGt" readOnly class="form-control datepicker" placeholder="" style="width:150px">
                </div>
                <div class="input-group">~</div>
                <div class="input-group">
                  <input type="text" name="orderTimeLt" readOnly class="form-control datepicker" placeholder="" style="width:150px">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">渠道单号：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.orderNo" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">手机号：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.mobile" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">面值：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.amount" class="form-control" style="width:150px;">
                </div>
              </div>
              <div style="width:100%;height:10px;"></div>
              <div class="form-group">
                <label class="control-label">渠道编码：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.channelCode" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <div class="btn-group">
                  <select class="selectpicker" title="-交易状态-" data-actions-box="true" @change="setStatus">
                    <option value="成功">成功</option>
                    <option value="失败">失败</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary">查 找</button>
              </div>
            </form>
          </div>
          <div class="col-12" style="padding-left:1.25rem;margin-bottom:10px;">合计金额： {{sumAmount}}元</div>
          <div class="col-12 table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>订单号</th>
                  <th>渠道编码</th>
                  <th>面值(元)</th>
                  <th>手机号</th>
                  <th>状态</th>
                  <th>交易时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(charge, index) in charges" :key="index">
                  <td>{{charge.orderNo}}</td>
                  <td>{{charge.channelCode}}</td>
                  <td>{{charge.amount}}</td>
                  <td>{{charge.mobile}}</td>
                  <td>{{charge.status}}</td>
                  <td>{{timeText(charge.orderTime)}}</td>
                </tr>
              </tbody>
            </table>
            <div class="col-12">
              <PageLink v-bind="paging" v-on:go-page="searchCharges($event)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</div>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'
  import Footer from './ComFooter'
  import Breadcrumb from './ComBreadcrumb'
  import PageLink from './ComPageLink'

  import '../assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'
  import '../assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'

  // 查询条件
  const search = {}

  // 列表数据
  const charges = []

  // 分页信息
  const paging = {}

  function setSearch(event) {
    this.search[event.target.name] = event.target.value
  }

  function setStatus(event) {
    this.search.status = event.target.value
  }

  function searchCharges(nowPage) {
    if (nowPage) {
      this.search.nowPage = nowPage
    }
    this.search.orderTimeGt = $("[name=orderTimeGt]").val()
    this.search.orderTimeLt = $("[name=orderTimeLt]").val()
    $(document).loadMsg("正在查询...")
    $.get(cfg.serverPath + '/charge/page',
      this.search,
      result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          return
        }
        $(document).hideMsg();
        this.sumAmount = result.data.sumAmount;
        let page = result.data.page
        Object.assign(this.paging, this.paging, page.paging)
        this.charges.splice(0, this.charges.length)
        if (!page.list) {
          return
        }
        for (let charge of page.list) {
          this.charges.push(charge) }
      })
  }
  function timeText(timestamp) {
    let date = new Date();
    date.setTime(timestamp);
    return date.format("yyyy-MM-dd hh:mm:ss");
  }
  export default {
    components: {
      Footer,
      Breadcrumb,
      PageLink
    },
    data() {
      return {
        search,
        charges,
        paging,
        sumAmount: 0
      }
    },
    methods: {
      setSearch,
      setStatus,
      searchCharges,
      timeText
    },
    computed: {
      breads() {
        return {
          title: '交易查询',
          items: [
            {
              href: '#/',
              name: '主页'
            }, {
              href: '',
              name: '交易查询'
            }
          ]
        }
      }
    },
    created() {
      this.search = {
        nowPage: 1,
        'sorts[0].field': 'orderTime',
        'sorts[0].isDesc': true
      }
      this.searchCharges()
      $(function() {
        $('.selectpicker').selectpicker()
        $('.datepicker').datepicker({
          autoclose: true,
          todayHighlight: true
        });
      })
    }
  }
</script>
<style scoped>
.btn-outline-info {
	border: 0px;
}

.btn-outline-info:hover {
	color: #2255a4;
	background-color: transparent;
	border-color: #2255a4;
}

.custom-checkbox .custom-control-label::before {
	top: 0.16rem;
}

.custom-checkbox .custom-control-label::after {
	top: 0.16rem;
}

.custom-checkbox .custom-control-label {
	font-weight: 100;
	position: initial;
}
</style>